<template>
  <div class="organization">
      <ElTabs v-model="current" class="demo-tabs" @tab-click="handleClick">
        <ElTabPane v-for="item in tabsData" 
            :label="item.label" 
            :name="item.name"
            :key="item.id">
            <component 
                :is="item.component" 
                :key="item.id"
            ></component>
        </ElTabPane>
    </ElTabs>
  </div>
</template>

<script>
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted } from 'vue'
import list from './list.vue'
import importList from './userImport.vue'
export default defineComponent({
    name: 'siteOrganization',
    components: {
        list,
        importList
    },
    setup(props, context){
      // 状态数据
      const state = reactive({
          tabsData: [
              {id: 1, name: 'tab1', label: '用户列表', component: 'list'},
              {id: 2, name: 'tab2', label: '批量导入', component: 'import-list'}
          ],
          current: 'tab1'
      })

      // 方法
      const methods = {
          handleClick(tab){
              console.log(tab)
            //   state.current = tab
          }
      }

      // 计算属性
      const computes = {}

      onMounted(() => {})

      return {
          ...toRefs(state),
          ...methods,
          ...computes
      }
    }
})
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .organization{
        padding: 20px;
    }
 
</style>
